<div class="breadcrumbs breadcrumbs-fixed ace-save-state">
    <ul class="breadcrumb">
        <li>
            <i class="ace-icon fa fa-users home-icon"></i>
            <a href="#">订单管理</a>
        </li>
        <li class="active">订单列表</li>
    </ul>
</div>


<div class="page-content">
    <div class="row">
        <div class="col-xs-12">
            <h4 class="header smaller lighter blue">订单列表</h4>
            <div class="row">
                <div class="col-sm-3">
                </div>
                <div class="col-sm-9">
                    <form id="searchForm" class="form-inline text-right" role="search">
                        <div class="input-group col-xs-3">
                            <span class="input-group-addon"><i class="fa fa-calendar bigger-110"></i></span>
                            <input class="form-control" type="text" name="dateRangePicker"
                                   id="dateRangePicker">
                        </div>&nbsp;&nbsp;
                        <div class="input-group">
                            <input id="express" name="express" class="form-control input-sm" type="text"
                                   placeholder="订单号"/>
                            <span class="input-group-btn">
                                <button id="searchBtn" class="btn btn-xs btn-info" type="button">
                                    <i class="ace-icon fa fa-search"></i> 搜索
                                </button>
					        </span>
                        </div>
                    </form>
                </div>
            </div>
            <div class="space-6"></div>
            <div class="dataTables_wrapper form-inline no-footer">
                <table id="company-table" class="table table-striped table-bordered table-hover">
                    <thead>
                    <tr>
                        <th>订单编号</th>
                        <th>商品名称</th>
                        <th>封面</th>
                        <th>下单时间</th>
                        <th>单价*数量</th>
                        <th>总金额</th>
                        <th>状态</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>

    <div id="manager-modal" class="bootbox modal fade in" tabindex="-1" role="dialog" aria-hidden="false">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" data-dismiss="modal" class="bootbox-close-button close close-button">×
                    </button>
                    <h5 class="modal-title">发货</h5>
                </div>
                <div class="modal-body">
                    <form id="manager-form" class="form-horizontal" role="form">
                        <div class="form-group">
                            <label class="col-sm-3 control-label no-padding-right" for="receiverName"> 收货人姓名：</label>
                            <div class="col-sm-9">
                                <div class="clearfix">
                                    <input type="text" name="id" id="id" class="hidden">
                                    <input type="text" name="receiverName" id="receiverName" class="col-xs-9"
                                           disabled="disabled"/>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label no-padding-right" for="receiverPhone"> 收货人电话：</label>
                            <div class="col-sm-9">
                                <div class="clearfix">
                                    <input type="text" name="receiverPhone" id="receiverPhone" class="col-xs-9"
                                           disabled="disabled"/>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label no-padding-right" for="address"> 收货人地址：</label>
                            <div class="col-sm-9">
                                <div class="clearfix">
                                    <input type="text" name="address" id="address" class="col-xs-9"
                                           disabled="disabled"/>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label no-padding-right" for="expressCode"> 快递单号：</label>
                            <div class="col-sm-9">
                                <div class="clearfix">
                                    <input type="text" name="expressCode" id="expressCode" class="col-xs-9"
                                           onkeyup="this.value=this.value.replace(/\D/g,'')"/>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" data-dismiss="modal" class="btn btn-sm btn-default close-button"><i
                            class="fa fa-undo"></i> 取消
                    </button>
                    <button id="save-manager-btn" type="button" class="btn btn-sm btn-primary"><i
                            class="fa fa-check"></i> 确认无误，发货！
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div id="project_detail_modal" class="bootbox modal fade in" tabindex="-1" role="dialog" aria-hidden="false">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" data-dismiss="modal" class="bootbox-close-button close close-button">×
                    </button>
                    <h5 class="modal-title">订单详细信息</h5>
                </div>
                <div class="modal-body">
                    <div class="profile-user-info profile-user-info-striped">
                        <div class="profile-info-row">
                            <div class="profile-info-name"> 订单编号</div>

                            <div class="profile-info-value">
                                <span class="editable editable-click" id="dId"></span>
                            </div>
                        </div>

                        <div class="profile-info-row">
                            <div class="profile-info-name"> 支付方式</div>

                            <div class="profile-info-value">
                                <span class="editable editable-click" id="payType"></span>
                            </div>
                        </div>

                        <div class="profile-info-row">
                            <div class="profile-info-name"> 状态</div>

                            <div class="profile-info-value">
                                <span class="editable editable-click" id="type"></span>
                            </div>
                        </div>

                        <div class="profile-info-row">
                            <div class="profile-info-name"> 收货信息</div>

                            <div class="profile-info-value">
                                <span class="editable editable-click" id="dAddress"></span>
                            </div>
                        </div>

                        <div class="profile-info-row">
                            <div class="profile-info-name"> 买家留言</div>

                            <div class="profile-info-value">
                                <span class="editable editable-click" id="message"></span>
                            </div>
                        </div>

                        <div class="profile-info-row">
                            <div class="profile-info-name"> 评价信息</div>

                            <div class="profile-info-value">
                                <span class="editable editable-click" id="evaluate"></span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" data-dismiss="modal" class="btn btn-sm btn-primary"><i
                            class="fa fa-check"></i> 确定
                    </button>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript">
        var company_table, manager_validator;
        $(function () {
            company_table = $('#company-table').DataTable({
                language: {url: 'ace/json/dataTable_CN.json'},
                autoWidth: false,
                ordering: false,
                searching: false,
                serverSide: true,
                processing: true,
                deferRender: true,
                responsive: true,
                ajax: {
                    url: 'management/orderList'
                },
                columns: [
                    {
                        data: 'id',
                        defaultContent: ''
                    },
                    {
                        data: 'introduce',
                        defaultContent: ''
                    }, {
                        data: function (row) {
                            return "<a target='_blank' href='" + row.coverImage + "'><img class='img-thumbnail' style='height: 70px;width: auto;' src='" + row.coverImage + "'></a>";
                        }
                    },
                    {
                        data: 'createTime',
                        defaultContent: ''
                    }, {
                        data: function (row) {
                            return row.price + '*' + row.num
                        }
                    }, {
                        data: function (row) {
                            return row.price * row.num
                        }
                    }, {
                        data: function (row) {
                            if (row.type === 1) {
                                return ' 待付款'
                            }
                            if (row.type === 2) {
                                return ' 待发货'
                            }
                            if (row.type === 3) {
                                return ' 待收货'
                            }
                            if (row.type === 4) {
                                return ' 待评价'
                            }
                        }
                    }, {
                        data: function (row) {
                            var check = "";
                            if (row.type === 2) {
                                check = '&nbsp;&nbsp;<a id="editArticle" href="javascript:;" data-row="' + row + '" class="btn btn-xs btn-primary"><i class="fa fa-pencil"></i> 发货</a>';
                            }
                            // var del = '&nbsp;&nbsp;<a id="delArticle" href="javascript:;" data-id="' + row.id + '" class="btn btn-xs btn-danger"><i class="fa fa-trash"></i> 订单详情</a>';
                            var cc = '&nbsp;&nbsp;<a id="projectDetail" data-id="' + row.id + '" class="btn btn-xs btn-info"><i class="fa fa-search-plus bigger-120"></i> 查看</a>';
                            return check + cc;
                        }
                    }
                ]
            });


            //初始化表单校验
            manager_validator = $("#manager-form").validate({
                errorElement: 'div',
                errorClass: 'help-block',
                focusInvalid: false,
                ignore: "",
                rules: {
                    expressCode: {
                        required: true
                    }
                },
                messages: {
                    price: {
                        required: "请填写快递单号"
                    }
                }, highlight: function (e) {
                    $(e).closest('.form-group').removeClass('has-info').addClass('has-error');
                }, success: function (e) {
                    $(e).closest('.form-group').removeClass('has-error');
                    $(e).remove();
                }, errorPlacement: function (error, element) {
                    if (element.is('input[type=checkbox]') || element.is('input[type=radio]')) {
                        var controls = element.closest('div[class*="col-"]');
                        if (controls.find(':checkbox,:radio').length > 1) controls.append(error);
                        else error.insertAfter(element.nextAll('.lbl:eq(0)').eq(0));
                    } else if (element.is('.select2')) {
                        error.insertAfter(element.siblings('[class*="select2-container"]:eq(0)'));
                    }
                    else if (element.is('.chosen-select')) {
                        error.insertAfter(element.siblings('[class*="chosen-container"]:eq(0)'));
                    }
                    else {
                        error.insertAfter(element.parent());
                    }
                }
            });

            $('#searchBtn').click(function () {
                var param = $("#searchForm").serialize();
                company_table.ajax.url("management/orderList?" + param).load();
            });

            $('#company-table').find('> thead > tr > th input[type=checkbox]').eq(0).on('click', function () {
                $('#company-table').find('tbody > tr').find('input:checkbox').prop("checked", this.checked);
            });

            $('input[name=dateRangePicker]').daterangepicker({
                'applyClass': 'btn-sm btn-success',
                'cancelClass': 'btn-sm btn-default',
                locale: {
                    applyLabel: '确认',
                    cancelLabel: '取消',
                    format: 'YYYY-MM-DD'
                }
            })
                .prev().on(ace.click_event, function () {
                $(this).next().focus();
            });

            $('#company-table tbody').on('click', 'a#projectDetail', function () {
                var row = company_table.row($(this).parents("tr")).data();
                $("#dId").empty().append(row.id);
                if (row.payType === 1) {
                    $("#payType").empty().append("微信支付");
                }
                if (row.payType === 2) {
                    $("#payType").empty().append("支付宝支付");
                }
                if (row.payType === 3) {
                    $("#payType").empty().append("钱包支付");
                }
                if (row.type === 1) {
                    $("#type").empty().append("待付款");
                }
                if (row.type === 2) {
                    $("#type").empty().append("待发货");
                }
                if (row.type === 3) {
                    $("#type").empty().append("待收货");
                }
                if (row.type === 4) {
                    $("#type").empty().append("待评价");
                }
                $("#dAddress").empty().append(row.province + row.city + row.area + row.address);
                if (row.message == null) {
                    $("#message").empty().append("暂无留言");
                }
                $("#message").empty().append(row.message);
                if (row.evaluate == null) {
                    $("#evaluate").empty().append("暂无评价信息");
                }
                $("#evaluate").empty().append(row.evaluate);
                $("#project_detail_modal").modal("show");
            });

            //模态框隐藏事件
            $("#manager-modal").on("hide.bs.modal", function () {
                $("#manager-form")[0].reset();
                $("#manager-form .form-group").removeClass("has-error");
            });

            $('#company-table tbody').on('click', 'a#editArticle', function () {
                var row = company_table.row($(this).parents("tr")).data();
                $("#receiverName").val(row.receiverName);
                $("#id").val(row.id);
                $("#receiverPhone").val(row.receiverPhone);
                $("#address").val(row.province + row.city + row.area + row.address);
                $("#manager-modal").modal("show");
            });

            $("#save-manager-btn").on("click", function () {
                if ($('#manager-form').valid()) {
                    $.post('management/sendGoods', $('#manager-form').serialize(), function () {
                        $("#manager-modal").modal("hide");
                        company_table.ajax.reload();
                    });
                }
            });
        });
    </script>
</div>